<template>
  <div id="page" class="limit">
    <span v-show="page > 1" @click="limitloadimg_content(page - 1)">
      <router-link to=""><上一页</router-link>
    </span>
    <ul>
      <li
        class="page-item"
        v-for="(pages, number) of pages_pagelabel"
        :key="number"
        @click="limitloadimg_content(pages)"
      >
        <!-- <li class="page-item activeb" v-for="(pages,number) of pagelabel" :key=number v-show="pages<5 || pages==pagelabel"  @click="limitloadimg_content(pages)"> -->
        <!-- <router-link class="page-link" :to="`/picture/${homekeywords}/${pages}`" @click="chongxinjiazai(pages)">{{pages}}</router-link> -->
        <router-link
          class="page-link"
          :class="{ activeb: page == pages }"
          to="javascript:;"
          >{{ pages }}</router-link
        >
      </li>
    </ul>
    <span
      v-show="page != pagelabel && pagelabel != 0"
      @click="limitloadimg_content(page + 1)"
    >
      <router-link to="">下一页></router-link>
    </span>
  </div>
</template>
<style scoped>
/* 分页查询样式 */
.content .limit {
  margin: 100px auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.content .limit ul {
  justify-content: center;
  margin: 0px;
  padding: 0px 5px;
  display: flex;
}
.content .limit ul li {
  margin: 0px;
}
.content .limit ul li + li {
  margin-left: 5px;
}
.content .limit a {
  width: 32px;
  padding: 2px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  display: block;
  background: #fff;
  border: 1px solid rgb(250, 250, 250);
}
.content .limit span a {
  width: 70px;
}
/* a标签伪类声明 */
.content li a {
  color: rgb(15, 14, 14);
}

.content .limit a:hover {
  background: rgb(46, 117, 203);
  color: #fff;
}

.content .limit .activeb {
  background: rgb(123, 206, 231);
  border: 1px solid rgb(250, 250, 250);
}
</style>
<script>
export default {
  props: ["pagelabel", "page"],
  data() {
    return {
      pages_pagelabel: [], //页码数组
      pageswitch:true,
    };
  },
  methods: {
    limitloadimg_content(e) {
      if(this.pageswitch){
        this.pageswitch=false;
        this.$parent.limitloadimg_content(e);
        setTimeout(() => {
          this.pageswitch=true
        }, 1500);
      }
    },
    // 根据当前页面与页码总数生成选择性隐藏式页码
    pageArray(page, pagecount) {
      // console.log("页码总数", pagecount, "当前页码", page);
      let arr = [];
      if (pagecount < 9) {
        for (let i = 1; i <= pagecount; i++) {
          arr.push(i);
        }
        this.pages_pagelabel = arr;
      } else if (page < 9) {
        for (let i = 1; i <= 8; i++) {
          arr.push(i);
        }
        arr.push("...");
        arr.push(pagecount);
        this.pages_pagelabel = arr;
      } else if (page >= 9 && page < pagecount - 6) {
        this.pages_pagelabel = [
          1,
          "...",
          page - 2,
          page - 1,
          page,
          page + 1,
          page + 2,
          "...",
          pagecount,
        ];
      } else {
        this.pages_pagelabel = [
          1,
          "...",
          pagecount - 6,
          pagecount - 5,
          pagecount - 4,
          pagecount - 3,
          pagecount - 2,
          pagecount - 1,
          "...",
          pagecount,
        ];
      }
    },
  },
  watch: {
    // pagelabel(){
    //   console.log(`这是组件的${pagelabel}`)
    // }
  },
  mounted() {
    this.pageArray(this.page, this.pagelabel);
    // console.log(this.pages_pagelabel);
  },
};
</script>